<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/include/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>用户信息维护</title>
<d:script id="jquery,jquery-cookie,om-ui" />
<d:css id="om-ui" />
<d:css path="static/style/common.css"/>
<script type="text/javascript">
	$(document).ready(function() {
		$("#inputRoleNameList").omDropdown({
			dropdown:"#dropdown-roleGrid",
			width:600,
			height:360,
			dialog:true,
			onSelected:function(dropdown,records){
				var ids = [];
				var names = [];
				$.each(records,function(i,r){
					ids.push(r.id);names.push(r.name);
				});
				$("#roleIdList").val(ids.join(","));
				$("#inputRoleNameList").val(names.join(","));
			},
			dialogOptions:{
				title:'选择角色',
				buttons:[
				         {text:"确定",click:function(){
				        	 var records = [];
							var $grid = $("#roleGrid");
							var selectedRecords = $grid.data("SelectedRecords")||{};
							selectedRecords[$grid.data("NowPageKey")]=roleGrid.getSelections(true);
				        	 $.each(selectedRecords,function(k,v){
				        		 $.each(v,function(i,r){records.push(r)});
				        	 });
				        	 $("#inputRoleNameList").omDropdown("select",records);
				         }}
				]
			}
		});
		var initConfig = {};
		initConfig.deptTree={
			onDblClick:function(nodeData){
				$("#inputDeptName").omDropdown("select",nodeData);
			}
		}
		initConfig.roleGrid={
				onRefresh:function(nowPage,records,event){
					var $grid = $("#roleGrid");
					$grid.data("NowPageKey","PageSelected-"+nowPage);
					var selectedRecords = $grid.data("SelectedRecords")||{};
					var $storedRecords = selectedRecords[$grid.data("NowPageKey")]||[];
					var index = [];
					$.each(records,function(i,v){
						$.each($storedRecords,function(ii,vv){
							if(v.id == vv.id){
								index.push(i);
								return false;
							}
						});
					});
					roleGrid.setSelections(index);
				},
				onPageChange:function(type,newPage,event){
					var $grid = $("#roleGrid");
					var records = $grid.data("SelectedRecords")||{};
					records[$grid.data("NowPageKey")]=roleGrid.getSelections(true);
					$grid.data("SelectedRecords",records);
				}
			}
		//对页面中的组件进行初始化
		initUI(initConfig);
		$("#inputDeptName").omDropdown({
			dropdown:"#dropdown-deptTree",
			height:200,
			onSelected:function(dropdown,data){
				var $form = $("#formUser");
				$form.find("#inputDeptName").val(data.text);
				$form.find(":input[name='dept.id']").val(data.id);
			}
		});
		$("#formUser").validate({
			rules:{
				username:{required:true},
				fullName:{required:true},
				roleNameList:{required:true},
				deptName:{required:true}
			}
		});
	});
</script>
</head>
<body>
	<form class="ui-form" id="formUser" action="${cxt }/system/user/save" method="POST">
		<input type="hidden" name="id" value="${user.id }">
		<table>
			<tr>
				<th>用户名:</th>
				<td><input type="text" name="username" value="${user.username }" /></td>
			</tr>
			<tr>
				<th>真实姓名:</th>
				<td><input type="text" name="fullName" value="${user.fullName }" /></td>
			</tr>
			<tr>
				<th>E-Mail:</th>
				<td><input type="text" name="email" value="${user.email }" /></td>
			</tr>
			<tr>
				<th>联系方式:</th>
				<td><input type="text" name="mobile" value="${user.mobile }" /></td>
			</tr>
			<tr>
				<th>所属部门:</th>
				<td>
				<input type="hidden" name="dept.id" value="${user.dept.id }"/>
				<input type="text" id="inputDeptName" name="deptName" value="${user.dept.name }" /></td>
			</tr>
			<tr>
				<th>角色:</th>
				<td>
				<input type="hidden" id="roleIdList" name="roleIdList" value="${roleIdList }"/>
				<input type="text" id="inputRoleNameList" name="roleNameList" value="${roleNameList}"/></td>
			</tr>
			<tr>
				<th>是否启用:</th>
				<td><input type="radio" value="1" name="enabled" ${user==null || user.enabled?"checked":""}>是  
				<input type="radio" value="0" name="enabled" ${user==null || user.enabled?"":"checked" }>否</td>
			</tr>
			<tr>
				<th>备注信息:</th>
				<td><textarea name="remark" style="width:200px;height:60px">${user.remark }</textarea></td>
			</tr>
		</table>
		<div style="display:${user==null ? '':'none'};margin-top:5px;">
			用户初始密码为:111111
		</div>
	</form>
	<div id="dropdown-deptTree" style="display:none" >
		<div id="deptTree" class="ui-tree" dataSource="${ctx }/system/dept/treeData" simpleDataModel="true" ></div>
	</div>
	<div id="dropdown-roleGrid" style="display:none;height:100%;width:100%;" >
		<div id="roleGrid" class="ui-grid" height="400" dataSource="${ctx }/system/role/gridData" singleSelect="false" limit="2">
			<div class='ui-grid-colmodel'>
				<span header="角色名称" name="name" width="100"></span>
				<span header="角色描述" name="remark" width="autoExpand"></span>
			</div>
		</div>
	</div>
</body>
</html>